<template>
  <div class="home-container">
    <!-- <img src="../assets/img/sea.jpg" class="carimg" /> -->
    <!-- <div class="message-container">
      <h1 class="message-title">留言板</h1>
      <div class="message-input-wrapper">
        <input
            v-model="messageContent"
            placeholder="说点什么吧"
          />
          <button
            class="bounceInLeft"
          >
            发送
          </button>
      </div>
    </div> -->

    <!-- <div class="barrage-container">
      <vue-baberrage :messages="messages">
        <template v-slot:default="slotProps">
          <span class="barrage-items">
            <img
              :src="slotProps.item.avatar"
              width="30"
              height="30"
              style="border-radius: 50%"
            />
            <span class="ml-2">{{ slotProps.item.author }} :</span>
            <span class="ml-2">{{ slotProps.item.messageContent }}</span>
          </span>
        </template>
      </vue-baberrage>
    </div> -->
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: "Message",
  data() {
    return {
      messageContent: "",
      messages: [],
    };
  },
  created() {
    // axios.get("http://localhost:9000/api/v1/getMessages").then((t) => {
    //   this.messages = t.data;
    //   console.log(this.messages);
    // });
  },
};
</script>

<style scoped>
.carimg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  /* opacity: 0.8; */
  position: fixed;
  z-index: -9;
  /* top: -60px; */
}
.home-container {
  z-index: -9;
  height: 100vh;
  width: 100%;
  overflow: auto;
  /* overflow-y: scroll; */
  /* position: absolute; */
  /* top: -60px; */
}

.message-title {
  color: #eee;
  animation: title-scale 1s;
}
.message-container {
  position: absolute;
  width: 360px;
  top: 35%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  margin: 0 auto;
  color: #fff;
}
.message-input-wrapper {
  display: flex;
  justify-content: center;
  height: 2.5rem;
  margin-top: 2rem;
  opacity: 0.7;
}
.message-input-wrapper input {
  outline: none;
  width: 70%;
  border-radius: 20px;
  height: 100%;
  padding: 0 1.25rem;
  color: #eee;
  border: #fff 1px solid;
  margin-right: 8px;
}
.message-input-wrapper input::-webkit-input-placeholder {
  color: #eeee;
}
.message-input-wrapper button {
  outline: none;
  border-radius: 20px;
  height: 100%;
  padding: 0 1.25rem;
  border: #fff 1px solid;
}


.barrage-container {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% -50px);
  width: 100%;
}
.barrage-items {
  background: rgb(0, 0, 0, 0.7);
  border-radius: 100px;
  color: #fff;
  padding: 5px 10px 5px 5px;
  align-items: center;
  display: flex;
}
</style>
